
.chat-box{
	height: 40px;
	line-height: 40px;
	border-top: solid 1px #ddd;
	position: absolute;
	bottom: 0px;
	left: 0px;
	padding: 7px;
	background-color: #f8f8f8;
	.col{
		padding: 0px;
		.message{
			width: 100%;
			height: 25px;
			border-radius: 5px;
			border: solid 1px #ddd;
			padding-left: 5px;
			padding-right: 5px;
		}
		&.send{
			padding-left: 10px;
			.btn-send{
				width: 100%;
				background: none;
				border: none;
				height: 25px;
				float: left;
				color: #39d167;
				font-size: 18px;
				line-height: 25px;
			}
		}
		&.img{
			.btn-img{
				width: 100%;
				height: 25px;
				background-image: url("../img/btn-img.jpg");
				background-repeat: no-repeat;
				background-size: contain;
				background-color: transparent;
				background-position: center center;
				border: none;
				padding: 0px;
				margin: 0px;
			}
		}
		
	}
}
.chat-page{
	&.chat-page{
		background-color: #f5f5f5;
	}
	.chat-list{
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 40px;
		.chat-list-box{
			width: 100%;
			height: 100%;
			overflow-y: scroll;
			-webkit-overflow-scrolling: touch;
		}
	}
	.message-list{
		.list{
			.money-tip{
				width: 100%;
				padding: 10px;
				font-size: 12px;
				color: #666;
				padding-bottom: 20px;
			}
			.over-tip{
				width: 100%;
				text-align: center;
				height: 30px;
				padding-bottom: 100px;
				color: #666;
				font-size: 12px;
			}
		}
		.item{
			background: none;
			border: none;
			margin-top: 10px;
			.avatar{
				-webkit-box-flex: 0;
			    -webkit-flex: 0 0 17%;
			    -moz-box-flex: 0;
			    -moz-flex: 0 0 17%;
			    -ms-flex: 0 0 17%;
			    flex: 0 0 17%;
			    max-width: 17%;
			    text-align: center;
			    img{
			    	width: 40px;
			    	height: 40px;
			    	border-radius: 50%;
			    }
			}
			&.from{
				.content{
					float: right;
					background-color: #FFF !important;
					border: solid 1px #ddd;
				}
				.chat-arrow{
					right: -5px;
					z-index: 2;
					background-image: url("../img/chat-arrow3.png");
				}
			}
			&.to{
				.content{
					float: left;
					background-color: #39d167;
				}
				.chat-arrow{
					left: -5px;
					background-image: url("../img/chat-arrow2.png");
				}
			}
			.msg-box{
				-webkit-box-flex: 0;
			    -webkit-flex: 0 0 83%;
			    -moz-box-flex: 0;
			    -moz-flex: 0 0 83%;
			    -ms-flex: 0 0 83%;
			    flex: 0 0 83%;
			    max-width: 83%;
			    padding-left: 10px;
			    padding-right: 10px;
				.msg{
					width: 100%;
				    position: relative;
				    &.pic{
				    	img{
							max-width:100%;
				    	}
				    }
				    .chat-arrow{
						position: absolute;
						width: 6px;
						height: 8px;
						top: 10px;
						background-repeat: no-repeat;
						background-size: contain;
				    }
				    .content{
				    	max-width: 100%;
						white-space: normal;
						font-size: 13px;
						border-radius: 5px;
						padding: 5px;
						width: auto;
						display: inline-block;
						color: #000;
				    }
				}
			}
			
		}
		

	}
	
}
.recent-chat{
.check-box{
		position: absolute;
		top: 3px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		.scroll-view{
			width: 100%;
			height: 100%;
		}
	}
	.recent-chat-list{
		.item{
			.avatar{
				width: 62px;
				height: 62px;
				border-radius: 50%;
			}
			.name{
				color: #000;
				font-size: 16px;
				font-weight: bold;
				line-height: 30px;
			}
			.content{
				color: #666666;
				font-size: 14px;
			}
			.op{
				// -webkit-align-items: center;     
				// -ms-flex-align: center;     
				// align-items: center;  
				// display: -webkit-flex;   
				// display: flex;
				.status{
					max-width: 40px;
					width: 100%;
					height: 20px;
					border-radius: 3px 3px;
					font-size: 12px;
					display: block;
					background-color: #39d167;
					color: #fff;
					text-align: center;
					margin: 10px auto;
					margin-bottom: 0px;
					&.over{
						background-color: #cccccc;
					}
				}
				.flag{
					display: block;
					width: 15px;
					height: 15px;
					border-radius: 50%;
					background-color: #f92d2d;
					color: #fff;
					font-size: 12px;
					text-align: center;
					line-height: 15px;
					margin: 2px auto;
				}
			}
		}
		
		
	}
}